import React, { FC, useEffect, useState } from 'react';
import './index.less';

export const Banner: FC = () => {
  const [keyword, setKeyword] = useState('');
  const [showClearBtn, setShowClearBtn] = useState(false);

  useEffect(() => {
    setShowClearBtn(keyword !== '');
  }, [keyword]);

  return (
    <div className='banner'>
      <h1>全栈攻城狮</h1>
      <div className='input'>
        <div className='search-icon'>🔍</div>
        <input type="text" value={ keyword } onChange={ e => setKeyword(e.target.value) } />
        { showClearBtn && <div className='clear-icon' onClick={ () => setKeyword('') }>×</div> }
      </div>
    </div>
  );
};
